// src/components/popups/sponsorTable/sponsorTableFilter/Status.tsx

import Select from "react-select";
import type { FC } from "react";

interface OptionType {
  value: string;
  label: string;
}

interface StatusProps {
  selectedStatus: string;
  setSelectedStatus: (value: string) => void;
}

const Status: FC<StatusProps> = ({ selectedStatus, setSelectedStatus }) => {
  const options: OptionType[] = [
    { value: "All", label: "All" },
    { value: "Current", label: "Current" },
    { value: "Not Current", label: "Not Current" },
  ];

  const selectedOption = options.find(option => option.value === selectedStatus) || null;

  const handleChange = (selected: OptionType | null) => {
    setSelectedStatus(selected ? selected.value : "");
  };

  return (
    <div className="mb-4 w-full">
      <label className="block text-sm font-medium text-gray-700 dark:text-cyan-300 mb-2">
        Status
      </label>
      <Select
        options={options}
        value={selectedOption}
        onChange={handleChange}
        className="react-select-container"
        classNamePrefix="react-select"
        placeholder="Select status"
        styles={{
          control: (base, state) => ({
            ...base,
            backgroundColor: state.isDisabled ? '#f3f4f6' : (document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff'),
            borderColor: state.isFocused ? (document.documentElement.classList.contains('dark') ? '#06b6d4' : '#2563eb') : (document.documentElement.classList.contains('dark') ? '#334155' : '#d1d5db'),
            boxShadow: state.isFocused ? `0 0 0 2px ${document.documentElement.classList.contains('dark') ? '#06b6d4' : '#2563eb'}` : 'none',
            color: document.documentElement.classList.contains('dark') ? '#e0f2fe' : '#1e293b',
            borderRadius: 12,
            minHeight: 36,
          }),
          menu: (base) => ({
            ...base,
            backgroundColor: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
            color: document.documentElement.classList.contains('dark') ? '#e0f2fe' : '#1e293b',
            borderRadius: 12,
          }),
          option: (base, state) => ({
            ...base,
            backgroundColor: state.isSelected
              ? (document.documentElement.classList.contains('dark') ? '#06b6d4' : '#2563eb')
              : state.isFocused
                ? (document.documentElement.classList.contains('dark') ? '#334155' : '#e0f2fe')
                : 'transparent',
            color: state.isSelected
              ? '#fff'
              : (document.documentElement.classList.contains('dark') ? '#e0f2fe' : '#1e293b'),
          }),
        }}
      />
    </div>
  );
};

export default Status;